<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link href="./css/ol.css" rel="stylesheet"/>
      <link href="./css/common.css" rel="stylesheet"/>
      <title>OL3-地图网格</title>
  </head>
  <body>
      <div id="map"></div>

      <script src="./js/ol.js"></script>
      <script type="text/javascript">
          var osmLayer = new ol.layer.Tile({
              source: new ol.source.OSM()
          });
          var map = new ol.Map({
              target: 'map',
              layers: [osmLayer],
              view: new ol.View({
                  center: ol.proj.transform([116, 40],"EPSG:4326", "EPSG:3857"),
                  zoom: 9
              })
          });
          var graticuleLayer = new ol.Graticule({
  //            map: map,
  //             strokeStyle: new ol.style.Stroke({
  //                 color: 'rgba(12, 12, 12, 0.8)',
  //                 width: 0.6
  //             }),
  //             targetSize: 100,
              opacity:1,//透明度，默认为1
              visible:true,//是否显示，默认true
              // zIndex:10,//图层渲染的Z索引,默认按加载顺序叠加
              // extent:[80,20,120,70],//渲染范围，默认是渲染全部
              targetSize:100,//单元格像素大小,默认100
              // showLabels:true,//为每条刻度线绘制一个带有各自纬度/经度的标签,默认true
              strokeStyle: new ol.style.Stroke({//用于绘制刻度线的样式
                  color: 'rgba(255,0,0,1)',//线条颜色
                  width: 2,//线条宽度
                  lineDash: [4]//虚线模式，默认值为null，无虚线
              }),
              lonLabelStyle:new  ol.style.Text({
                  font: '12px Calibri,sans-serif',
                  textBaseline: 'bottom',
                  fill: new  ol.style.Fill({
                      color: 'rgba(0,0,0,1)'
                  }),
                  stroke: new  ol.style.Stroke({
                      color: 'rgba(255,255,255,1)',
                      width: 3
                  })
              }),
              latLabelStyle:new ol.style.Text({
                  font: '12px Calibri,sans-serif',
                  textAlign: 'end',
                  fill: new  ol.style.Fill({
                      color: 'rgba(0,0,0,1)'
                  }),
                  stroke:  ol.style.Stroke({
                      color: 'rgba(255,255,255,1)',
                      width: 3
                  })
              }),

          });
          graticuleLayer.setMap(map);
      </script>
  </body>
</html>
